/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from "react";
import { Button, Modal, Tabs, message } from "antd";
import Display from "./DisplaySet";
import Text from "./text";
import Llm from "./llm";
import Startup from "./Startup";
import "./index.css";

const App = ({ modelSet, setModelSet }) => {
  const [open, setOpen] = useState(false);
  const [showMessage, setShowMessage] = useState(false);
  const handleOk = () => {
    // setLoading(true);
    // setTimeout(() => {
    //   setLoading(false);
    //   setOpen(false);
    // }, 3000);
    setShowMessage(true);
    // useEffect(() => {
      // if (!showMessage) return;
      // message.error("This is an error message");
    // }, [showMessage]);
  };

  const handleCancel = () => {
    setOpen(false);
    setModelSet(false);
  };

  //切换tab
  const onChangeTab = (key) => {
    console.log(key);
  };

  useEffect(() => {
    setOpen(modelSet);
  }, [modelSet]);

  useEffect(() => {
    if (!showMessage) return;
    message.error("This is an error message");
    setShowMessage(false);
  }, [showMessage]);
  const list = [
    {
      key: "1",
      label: "LLM默认项",
      children: <Llm handleCancel={handleCancel}/>,
    },
    {
      key: "2",
      label: "文本分割",
      children: <Text handleCancel={handleCancel} />,
    },
    {
      key: "3",
      label: "显示设置",
      children: <Display handleCancel={handleCancel} />,
    },
    {
      key: "4",
      label: "启动设置",
      children: <Startup handleCancel={handleCancel} />,
    },
  ];
  return (
    <>
      <Modal
        className="model-set-modal"
        open={open}
        title="设置"
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        width={{
          xs: '90%',
          sm: '80%',
          md: '70%',
          lg: '60%',
          xl: '50%',
          xxl: '40%',
        }}
        footer={null}
      >
        <Tabs
          className="model-set-tab"
          tabBarStyle={{
            borderRight: "none", // 移除底部边框
            margin: 0, // 可选：调整边距
          }}
          centered
          tabPosition="left"
          defaultActiveKey="1"
          items={list}
          onChange={onChangeTab}
        />
      </Modal>
    </>
  );
};
export default App;
